<template>
  <div>
    <u-cell-group :border="false">
      <cus-cell :border="false" title="表单模块">
        <div class="">
          <div v-if="editConfigCom.attribute.moduleId">
            <text>{{ tempModelName }}</text>
            <text @click="onClickShowAddModalPopup" class="button-text"
              >修改</text
            >
          </div>
          <u-button
            v-else
            plain
            hairline
            type="primary"
            icon="plus"
            size="small"
            @click="onClickShowAddModalPopup"
            >添加一个表单模块</u-button
          >
        </div>
      </cus-cell>
    </u-cell-group>

    <u-popup
      :show="isShowAddModal"
      mode="center"
      :round="10"
      @close="isShowAddModal = false"
    >
      <div class="table-main">
        <div class="table-main-header">
          表单模块
          <u-icon
            name="close"
            class="table-main-header-close"
            @click="isShowAddModal = false"
          />
        </div>
        <div class="item table-main-search">
          <u--input
            v-model="params.moduleName"
            placeholder="请输入表单模块标题"
          />
          <u-button type="primary" @click="handleSearch">搜索</u-button>
          <u-button @click="onClickReset">重置</u-button>
        </div>
        <div class="table-panel item">
          <table-panel
            bindKey="id"
            @onSelect="onSelectModel"
            :table-data="tableData"
            :table-head="column"
            ref="tablePanelRefs"
          />
        </div>
        <div class="item">
          <uni-pagination
            :total="total"
            :current="params.page"
            :pageSize="params.pageSize"
            @change="onChangePage"
          />
        </div>
        <div class="item table-confirm">
          <u-cell-group>
            <u-cell :border="false">
              <div class="u-slot-title flexAIC" slot="value">
                <u-button
                  plain
                  size="small"
                  style="margin-right: 10px"
                  @click="isShowAddModal = false"
                  >取消</u-button
                >
                <u-button
                  type="primary"
                  size="small"
                  @click="onClickSelectTable"
                  >确定</u-button
                >
              </div>
            </u-cell>
          </u-cell-group>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel";
import { getModuleById, getModuleList } from "@/service/api/lowcode";
import { MODULE_TYPE } from "@/const/widget";

export default {
  name: "yqd-module",
  components: { TablePanel },
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    editConfigComActiveId() {
      return this.$store.state.page.editConfigComActiveId;
    },
    activeIndex({ pageData, editConfigComActiveId }) {
      return pageData.items.findIndex((v) => v.id === editConfigComActiveId);
    },
    //组件本身属性
    editConfigCom({ pageData, activeIndex }) {
      return pageData.items[activeIndex];
    },
  },
  data() {
    return {
      column: [
        {
          label: "模块标题",
          prop: "moduleName",
        },
        {
          label: "创建时间",
          prop: "createTime",
        },
        {
          label: "选择",
          prop: "select",
        },
      ],
      tableData: [],
      total: 0,
      params: {
        moduleType: MODULE_TYPE.FORM_MODAL,
        page: 1,
        pageSize: 10,
        moduleName: "",
      },
      tempModelId: null,
      tempModelName: null,
      isShowAddModal: false,
    };
  },
  watch: {
    "editConfigCom.attribute.moduleId": {
      handler(val) {
        this.initModalInfo(val);
      },
      deep: true,
      immediate: true,
    },
    isShowAddModal() {
      this.$nextTick(() => {
        this.onClickReset();
      });
    },
  },
  methods: {
    handleSearch() {
      this.params.page = 1;
      this.$nextTick(() => {
        this.initModalList();
      });
    },
    onChangePage(e) {
      this.params.page = e.current;
      this.$nextTick(() => {
        this.initModalList();
      });
    },
    async initModalList() {
      const { list, total } = await getModuleList(this.params);
      this.tableData = list;
      this.total = total;
      console.log(list);
    },
    onClickShowAddModalPopup() {
      this.initModalList();
      this.isShowAddModal = true;
      this.$nextTick(() => {
        this.$refs.tablePanelRefs.setSelectItem(this.tempModelId);
      });
    },
    async initModalInfo(id) {
      if (id) {
        const data = await getModuleById({ id });
        this.tempModelId = data.id;
        this.tempModelName = data.moduleName;
      }
    },
    onClickReset() {
      this.params.page = 1;
      this.params.moduleName = "";
      this.$nextTick(() => {
        this.initModalList();
      });
    },
    onClickSelectTable() {
      if (!this.tempModelId) {
        return this.$showMessage({
          op: "message",
          type: "error",
          content: "请选择表单模块",
        });
        // return uni.showToast({ title: "请选择一个模块", icon: "error" });
      }
      this.editConfigCom.attribute.moduleId = this.tempModelId;
      this.isShowAddModal = false;
    },
    onSelectModel(e) {
      if (!e.id) return;
      this.tempModelId = e.id;
    },
  },
};
</script>

<style scoped lang="scss">
.table-main {
  min-width: 1000px;
  padding: 20px 20px 0 20px;
  .table-confirm {
    display: flex;
    justify-content: flex-end;
    &-btn {
      width: 100px;
    }
  }
  &-search {
    display: flex;
    .u-button {
      width: 100px;
      margin-left: 10px;
    }
  }
  &-header {
    position: relative;
    width: 100%;
    &-close {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
.button-text {
  color: $base-color;
  padding: 0 10px;
}
.item {
  margin: 10px 0;
}

.u-slot-title {
  width: 100%;
  justify-content: center;
  .u-button {
    width: 100px;
    margin: 0;
  }
}
</style>
